<template>
  <div class="article-list">
    <div
      v-for="article in data"
      :key="article.art_id"
      class="article"
      @click="articleOnClick(article.art_id)"
    >
      <div
        v-if="article.cover.type === 1"
        class="article-type1"
      >
        <section>
          <div class="info">
            <div class="title">{{ article.title }}</div>
          </div>
          <div class="img-wrapper">
            <img :src="article.cover.images[0]">
          </div>
        </section>
        <footer>
          <span class="author">{{ article.aut_name }}</span>
          <span class="comment-count">{{ article.comm_count }}评论</span>
          <span class="time">{{ getTime(article.pubdate) }}</span>
        </footer>
      </div>
      <div
        v-else
        class="article-other"
      >
        <div class="title">{{ article.title }}</div>
        <section>
          <div
            v-for="(img, i) in article.cover.images"
            :key="i"
            class="img-wrapper"
          >
            <img :src="img">
          </div>
        </section>
        <footer>
          <span class="author">{{ article.aut_name }}</span>
          <span class="comment-count">{{ article.comm_count }}评论</span>
          <span class="time">{{ getTime(article.pubdate) }}</span>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { mapState, mapActions } from 'vuex';

export default {
  name: 'ArticleList',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    // 集中导入model层数据
    ...mapState('channel', [
      'channelList',
    ]),
    ...mapState('article', [
      'articleList',
    ]),
  },
  methods: {
    // 频道
    ...mapActions('article', [
      'updateArticleDetails',
    ]),
    getTime(timestamp) {
      return moment(timestamp).fromNow();
    },
    articleOnClick(id) {
      // this.updateArticleDetails(id)
      this.$router.push({
        name: 'article-detail',
        params: {
          id,
        }
      });
    }
  },
}
</script>

<style lang="less" scoped>
@import url('@/assets/styles/common.less');

.article {
  padding: 8px 0;
  border-bottom: 1px solid #e9e9e9;

  &:last-child {
    border: none;
  }

  .article-type1 section {
    grid-template-columns: 2fr 1fr;
    gap: 16px;
  }

  .article-other section {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  section {
    display: grid;
    margin: 8px 0;

    .img-wrapper {
      height: 82px;
      overflow: hidden;
      border-radius: 4px;

      img {
        height: 100%;
        width: 100%;
        // 图片适应父盒子的宽高
        object-fit: cover;
      }
    }
  }

  footer {
    .sub-text;

    span {
      margin-right: 8px;
    }
  }
}
</style>
